//https://blog.csdn.net/zl1zl2zl3/article/details/81357146
import {PureComponent } from 'react';
import {
	Row,
	Col,
	Form,
	Input,
	Select,
	Modal,
	TreeSelect,
	DatePicker
} from 'antd';
import moment from 'moment';

import SelectDeptTree from '@/components/SelectDeptTree';
import SelectOrganTree from '@/components/SelectOrganTree';

const FormItem = Form.Item;
const { Option } = Select;


// 修改表单
@Form.create()
class UpdateForm extends PureComponent {
	static defaultProps = {
		handleUpdate: () => {},
		handleUpdateModalVisible: () => {},
		values: {},
	};

	constructor(props) {
		super(props);
		this.state = {
			formVals: {
				lawpolicy: props.values.lawpolicy,
				type: props.values.type,
				starttime: props.values.starttime
			},
			getDeptTreeBySelectTree: "",
			getOrganTreeBySelectTree: "",
		};

	}

	selectedDeptTreeValue = (deptRecord) => {
		this.setState({
			getDeptTreeBySelectTree: deptRecord
		})
	}

	selectedOrganTreeValue = (orgRecord) => {
		this.setState({
			getOrganTreeBySelectTree: orgRecord
		})
	}

	handleLocalUpdate = () => {
		const { form,handleUpdate } = this.props;
		const { getDeptTreeBySelectTree } = this.state;
		const { formVals: oldValue } = this.state;
		form.validateFields((err, fieldsValue) => {
			if(err) return;
			const formVals = { ...oldValue,
				...fieldsValue
			};
			this.setState({
				formVals,
			});
			if(getDeptTreeBySelectTree) {
				formVals.dept_id = getDeptTreeBySelectTree.triggerNode.props.dataRef.dept_id;
				formVals.dept = getDeptTreeBySelectTree.triggerNode.props.dataRef.title;
			}
			
			if(formVals.post) {
				formVals.post_id = formVals.post.key;
				formVals.post_name = formVals.post.label;
			}
			
			handleUpdate(formVals);

		});
	};

	renderContent = (formVals, parentDeptTreeMethod, parentOrganTreeMethod) => {
		const { form,authForUser,postForUser } = this.props;
		console.log(formVals);
		const changeTypeTree = [
		  {
		    title: '首授',
		    value: '0-1',
		    key: '0-1',
			isLeaf: true,
		  },
		  {
		    title: '按期晋升',
		    value: '0-2',
		    key: '0-2',
			isLeaf: true,
		  },
		  {
		    title: '晋职晋升',
		    value: '0-3',
		    key: '0-3',
			isLeaf: true,
		  },
		  {
		    title: '延期晋升',
		    value: '0-4',
		    key: '0-4',
			isLeaf: true,
		  },
		  {
		    title: '提前晋升',
		    value: '0-5',
		    key: '0-5',
			isLeaf: true,
		  },
		  {
		    title: '取消警衔',
		    value: '0-6',
		    key: '0-6',
			isLeaf: true,
		  },
		  {
		    title: '技术转行政',
		    value: '0-7',
		    key: '0-7',
			isLeaf: true,
		  },
		  {
		    title: '其它授衔部门转入',
		    value: '0-8',
		    key: '0-8',
			isLeaf: true,
		  },
		  {
		    title: '微调晋升',
		    value: '0-9',
		    key: '0-9',
			isLeaf: true,
		  },
		  {
		    title: '警衔降级',
		    value: '0-10',
		    key: '0-10',
			isLeaf: true,
		  },
		  {
		    title: '选升',
		    value: '0-11',
		    key: '0-11',
			isLeaf: true,
		  },
		  {
		    title: '不保留警衔',
		    value: '0-12',
		    key: '0-12',
			isLeaf: true,
		  },
		  {
		    title: '警衔变更',
		    value: '0-13',
		    key: '0-13',
			isLeaf: true,
		  },
		  {
		    title: '警衔保留',
		    value: '0-14',
		    key: '0-14',
			isLeaf: true,
		  },
		  
		];

return(
<Form  layout="vertical">


    <Row gutter={{ md: 8, lg: 24, xl: 48 }}>

        <Col  md={12} sm={24}>
	        <FormItem  label="政策条款名称">
	            {form.getFieldDecorator('lawpolicy', {
	            rules: [{ required: true, message: '请输入政策条款名称！'}],
	            initialValue: formVals.lawpolicy,
	            })(<Input placeholder="请输入" />)}
	        </FormItem>
        </Col>


        <Col  md={12} sm={24}>
	        <FormItem  label="类型">
	            {form.getFieldDecorator('type', {
	            rules: [{ required: true, message: '请选择类型！'}],
	            initialValue: formVals.type,
	            })(
					<TreeSelect
				      	showSearch
				        style={{ width: '100%' }}
				        dropdownStyle={{ maxHeight: 400, overflow: 'auto' }}
				        treeData={changeTypeTree}
				        placeholder="请选择"
				        filterTreeNode={(input, treeNode) => 
				        	treeNode.props.title.toLowerCase().indexOf(input.toLowerCase()) >= 0
				        }
				    />
	            )}
	        </FormItem>
        </Col>

    </Row>
    
    <Row gutter={{ md: 8, lg: 24, xl: 48 }}>

        <Col  md={12} sm={24}>
	        <FormItem  label="实施时间">
	            {form.getFieldDecorator('starttime', {
	            rules: [{ required: true, message: '请选择实施时间！'}],
	            initialValue: moment(formVals.starttime),
	            })(<DatePicker format="YYYY-MM-DD" style={{ width: '100%' }} placeholder="请选择"/>)}
	        </FormItem>
        </Col>

        <Col  md={12} sm={24}>
	        <FormItem  label="相关附件">
	            {form.getFieldDecorator('file', {
	            rules: [{ required: true, message: '请选择相关附件！'}],
	            })(
	            	<Input type="file" placeholder="请选择"/>
	            )}
	        </FormItem>
        </Col>

    </Row>

</Form>
);

};

	render() {
		const {
			updateModalVisible,
			handleUpdateModalVisible,
			values,
			dispatch,
			selectDeptTree,
			selectOrganTree,
			requestModelName,
		} = this.props;
		const {
			formVals
		} = this.state;
		const parentDeptTreeMethod = {
			dispatch: dispatch,
			selectDeptTree: selectDeptTree,
			selectedDeptTreeValue: this.selectedDeptTreeValue,
			requestModelName: requestModelName,
		}

		const parentOrganTreeMethod = {
			dispatch: dispatch,
			selectOrganTree: selectOrganTree,
			selectedOrganTreeValue: this.selectedOrganTreeValue,
			requestModelName: requestModelName,
		}

		return(
			<Modal
    width={800}
    bodyStyle={{ padding: '32px 40px 48px' }}
    destroyOnClose
    title="修改"
    visible={updateModalVisible}
    onOk={() => this.handleLocalUpdate()}
    onCancel={() => handleUpdateModalVisible(false, values)}
    afterClose={() => handleUpdateModalVisible()}
>

    {this.renderContent(formVals,parentDeptTreeMethod,parentOrganTreeMethod)}
</Modal>
		);
	}

}

export default UpdateForm;